<!--
 * @FilePath: test.vue
 * @@author: wjj
 * @Date: 2025-05-23 16:17:26
 * @@Description: new js file
-->
<template>
  <el-upload
    class="upload-demo"
    :auto-upload="false"
    :on-change="handleFileChange"
    :show-file-list="false"
    accept="image/*"
  >
    <el-button type="primary">选择图片</el-button>
    <template #tip>
      <div class="el-upload__tip">支持 JPG/PNG 格式，大小不超过5MB</div>
    </template>
  </el-upload>

  <el-button @click="submitUpload">开始上传</el-button>
  <el-progress :percentage="progress" />
</template>

<script lang='ts' setup name='filename'>
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
//引入用户相关的小仓库
import useUserStore from '@/store/modules/user'
import useSocketClient from '@/store/socket/socket_client'
import emmit from '@/utils/emitter'
import { useRoute, useRouter } from 'vue-router'
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
// 挂载完毕
//onMounted(()=>{})
//监控数据
//watch(select, (newVal, oldVal) => {})
const fileList = ref([])
const formData = new FormData()
const progress = ref(0)

// 文件选择处理
const handleFileChange = (file: any) => {
  if (!['image/jpeg', 'image/png'].includes(file.raw.type)) {
    ElMessage.error('仅支持 JPG/PNG 格式')
    return false
  }
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('文件大小超过5MB限制')
    return false
  }
  formData.append('image', file.raw)
}

// 提交上传
const submitUpload = async () => {
  try {
    const res = await request.post('/nimi/upload/', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: (e: any) => {
        progress.value = Math.round((e.loaded * 100) / e.total)
      },
    })
    ElMessage.success(`上传成功！访问地址：${res.data.url}`)
  } catch (err: any) {
    ElMessage.error(`上传失败：${err.response.data.message}`)
  }
}
</script>
<style scope lang='scss'>
</style>